<template>
  <div class="wrapper">

    <!--  头部-->
    <div class="header">
      <div class="location">
        <div class="icon">
          <el-icon size="string" style="margin-right: 1vw;margin-left: 2.3vw"><Location /></el-icon>
          <div class="icon-text">饿了么</div>
        </div>
        <div class="location-text">
          云南大学呈贡校区力行楼<el-icon style="margin-top: 1vw"><CaretBottom /></el-icon>
        </div>
      </div>
    </div>



    <!-- search部分 -->
    <!--
    搜索框部分（此块与search-fixed-top块宽度高度一致，用于当
    search-fixed-top块固定后，挡住下面块不要窜上去）
    -->
    <div class="search">
      <!-- 当滚动条超过上面的定位块时，search-fixed-top块变成固定在顶部。 -->
          <div class="search-panel" ref="fixedBox" >
            <i style="flex:0 0 6vw; padding-left: 3vw; font-size: 4vw;"  class="fa-solid fa-expand"></i>
            <input style="flex:6;" type="text"  placeholder="请输入要查询的商品"/>
            <div style="flex:0 0 17vw" class="search-button">搜索</div>
          </div>

    </div>

    <!-- 点餐分类部分 -->
    <ul class="foodtype">
      <li @click="toBusinessList(item.typeId)" v-for="(item, index) in data.foodTypes" :key="index">
        <img :src="item.img">
        <p>{{ item.typeName }}</p>
      </li>
    </ul>


    <div class="banner">
      <div class="banner_left">
        <div class="banner_left_top">
          <img src="../assets/Bannerimg/banner-left-top.jpg" />
          <p>饿小宝:</p>
          <p class="title"> 在线拼单</p>
        </div>
        <div class="banner_left_content">
          <div class="banner_left_content_left">
            <p class="title">一起来嗨</p>
            <div class="banner_left_content_left_button">去看看</div>
          </div>
          <div class="banner_left_content_right">
            <img src="../assets/Bannerimg/bannerLeft-Right.png" />
          </div>
        </div>
      </div>
      <div class="banner_right">
        <div class="banner_right_item">
          <p class="title">晚餐聚会</p>
          <img src="../assets/Bannerimg/banner01.jpg"/>
          <p class="remark">
            一起吃好点
          </p>
        </div>
        <div class="banner_right_item">
          <p class="title">学生福利</p>
          <img src="../assets/Bannerimg/banner02.jpg"/>
          <p class="remark">最高省912</p>
        </div>

      </div>
    </div>

    <!--  推荐-->
    <div class="recommend">
      <div class="recommendItem selected">换换口味</div>
      <div class="recommendItem ">天天爆红包</div>
      <div class="recommendItem ">减配送费</div>
      <div class="recommendItem ">学生特价</div>
      <div class="recommendItem " style="font-size: 3vw">&#9776;</div>
      <i class="fa-solid fa-bars"></i>
    </div>

    <!-- 推荐商家列表部分 -->
    <ul  class="foodList" >
      <li v-for="business in data.businesses" :key="business.businessId"  @click="toBusinessInfo(business.businessId)">
      <div class="foodItem_1">
        <div class="left">
          <img :src="business.businessImg" />
        </div>
        <div class="right">
          <div class="one">{{business.businessName}}</div>
          <div class="two">

            <div class="left">4.9分</div>
            <div class="center">月售700+</div>
            <div class="right">30分钟&nbsp;624m</div>

          </div>
          <div class="three">

            <div class="left">起送 &yen;{{ business.starPrice }}&nbsp;配送 &yen;{{ business.deliveryPrice }}</div>
            <div class="center"><del> &yen;5.3</del></div>
            <div class="right">蜂鸟准时达</div>


          </div>
          <div class="four">
            <div>夜宵热搜</div>
          </div>
          <div class="five">
            <div class="left">👑6元无门槛</div>
            <div class="right">25减3&nbsp;40减5</div>
          </div>

        </div>
      </div>
      </li>-->
    </ul >


    <div> &nbsp;</div>
    <div> &nbsp;</div>


    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>
<script setup>
import router from "@/router";
import { ref, onMounted, onBeforeUnmount } from 'vue';
import Footer from '../components/Footer.vue';
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import { useRouter } from 'vue-router';
import {Location,} from "@element-plus/icons-vue";
import { authService } from '@/service/AuthService';

const fixedBox = ref(null);

const data = reactive({
  foodTypes:{},
  businesses:{},

})

// 在组件顶层定义 handleScroll 函数
const handleScroll = () => {
  const scroll = document.documentElement.scrollTop || document.body.scrollTop;
  const width = document.documentElement.clientWidth;
  if (scroll > width * 0.12) {
    fixedBox.value.style.position = 'fixed';
    fixedBox.value.style.left = '0';
    fixedBox.value.style.top = '0';
  } else {
    fixedBox.value.style.position = 'static';
  }
};


onMounted(() => {
  document.addEventListener('scroll', handleScroll);
  // 组件挂载后执行的代码
  getFoodType();
  getBusinesses();
});

onBeforeUnmount(() => {
  document.removeEventListener('scroll', handleScroll);
});

//加载食物分类
const getFoodType = ()=>{
  request.get("/FoodType/listAll").then(res =>{
    data.foodTypes = res.data
  })

}

//加载商家
const getBusinesses = ()=>{
  request.get("/Business/getAllBusiness").then(res =>{
    data.businesses = res.data
  })

}


//根据食物分类，跳转到对应的商家列表
const toBusinessList = (orderTypeId) => {
  router.push({ path: '/businessList', query: { orderTypeId } });
};

const toBusinessInfo =(businessId) => {
  router.push({ path: '/businessInfo', query: {businessId} });
}

</script>
<style>

/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
}

/****************** header ******************/
.wrapper .header {
  width: 100%;
  display: flex;
  flex-direction: column;
  color: white;
  height: 10vw;
}
.wrapper .header .location {
  width: 100%;
  height: 12vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #17BAF9;
}
.wrapper .header .location .icon {
  align-items: center;
  display: flex;
  font-size: 8vw;
  padding-left: 3vw;
  flex: 4;
}
.wrapper .header .location .icon .icon-text {
  margin-left: 1vw;
}
.wrapper .header .location .location-text {
  display: flex;

  padding-right: 2vw;
  flex: 5;
  font-size: 4.5vw;
  white-space: nowrap; /* 保持文本在一行显示 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}

/****************** search ******************/
/*search样式*/
.wrapper .search {
  margin-top: 1vw;
  width: 100%;
  height: 13vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: white;
}

.wrapper .search   .search-panel {
  margin-top: 6vw;
  height: 13vw;
  width: 95%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 4px solid #17BAF9;
  border-radius: 25px;
  color: #9F9F9F;
  background-color: white;
}

.wrapper .search  .search-panel input {
  outline: none;
  border: none;
  color: #9F9F9F;
  font-size: 4vw;
  font-family: "宋体";
  /*此样式是让文本选中状态无效*/
  user-select: none;

}

.wrapper .search   .search-panel .search-button {
  cursor: pointer;
  height: 12vw;
  border-radius: 25px;
  background-color: #17BAF9;
  color: white;
  font-size: 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
/****************** 点餐分类部分 ******************/
.wrapper .foodtype {
  width: 100%;
  height: 48vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  /*要使用align-content。10个子元素将自动换行为两行，而且两行作为一个整体垂直居中*/
  align-content: center;
}
.wrapper .foodtype li {
  /*一共10个子元素，通过计算，子元素宽度在16.7 ~ 20 之间，才能保证换两行*/
  width: 18vw;
  height: 20vw;
  display: flex;
  /*弹性盒子主轴方向设为column，然后仍然是垂直水平方向居中*/
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
}
.wrapper .foodtype li img {
  width: 12vw;
  /*视频讲解时高度设置为12vw，实际上设置为10.3vw更佳*/
  height: 10.3vw;
}
.wrapper .foodtype li p {
  font-size: 3.2vw;
  color: #666;
}

/*广告样式*/
.wrapper .banner {
  width: 100%;
  display: flex;
}
/*!*左边样式*!*/
.wrapper .banner .banner_left {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wrapper .banner .banner_left .banner_left_top {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 5vw;
}

.wrapper .banner .banner_left .banner_left_top img {
  width: 5vw;
  height: 5vw;
}

.wrapper .banner .banner_left .banner_left_content {
  display: flex;
  width: 100%;
  height: 13vw;
}

.wrapper .banner .banner_left .banner_left_content .banner_left_content_left {
  flex: 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}
/*!*一起来嗨*!*/
.wrapper .banner .banner_left .banner_left_content .banner_left_content_left .title {
  font-size: 3.3vw;
  font-weight: bolder;
  font-style: normal;
}

.wrapper .banner .banner_left .banner_left_content .banner_left_content_left .banner_left_content_left_button {
  cursor: pointer;
  height: 3vw;
  width: 10vw;
  border-radius: 10px;
  background-color: #CEFEFF;
  color: #00A6EB;
  font-size: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper .banner .banner_left .banner_left_content .banner_left_content_right {
  flex: 7;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .banner .banner_left .banner_left_content .banner_left_content_right img {
  width: 14vw;
  height: 14vw;
  display: flex;
  justify-content: center;
  align-items: center;

}

.wrapper .banner .banner_left .banner_left_top p {
  font-size: 3.7vw;
  font-style: italic;
}

.wrapper .banner .banner_left .banner_left_top .title {
  font-size: 3.3vw;
  font-weight: bolder;
  font-style: normal;
}

/*右边样式*/
.wrapper .banner .banner_right {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .banner .banner_right .banner_right_item {
  flex: 5;
  height: 18vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wrapper .banner .banner_right .banner_right_item .title {

  font-size: 3.3vw;
  font-weight: bolder;
  margin-bottom: 0.2vw;
}

.wrapper .banner .banner_right .banner_right_item img {
  width: 10vw;
  height: 10vw;
  margin-top: 0.5vw;
}

.wrapper .banner .banner_right .banner_right_item .remark {
  margin-top: 0.5vw;
  font-size: 2.3vw;
  color: #999999;
}

/*recommend样式*/
.wrapper .recommend {
  margin-top: 5vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
}

.wrapper .recommend .recommendItem, .wrapper .recommend i {
  color: #666666;
  font-size: 3.2vw;
}


.wrapper .recommend .selected {
  color: #00A1D7;
  font-weight: bolder;
}
//商家列表
.wrapper .foodList {
  margin-top: 0vw;
  margin-bottom: 20vw;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-content: center;


}



/*第一个食品*/
.wrapper .foodList .foodItem_1{
  display: flex;
  margin-top: 3vw;
  width: 100vw;
  margin-left: 3vw;
  margin-right: 3vw;
  margin-bottom: 3vw;


}
.wrapper .foodList .foodItem_1 .left{
  margin-right: 3vw;
}
/*图片*/

.wrapper .foodList .foodItem_1 .left img{
  height: 25vw;
  width: 25vw;
}

/*右边*/
.wrapper .foodList .foodItem_1 .right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}
.wrapper .foodList .foodItem_1 .right .one{
  font-size: 5vw;
  font-weight: bold;
}

.wrapper .foodList .foodItem_1 .right .two{
  font-size: 3vw;
  display: flex;
  align-items: center;
}

.wrapper .foodList .foodItem_1 .right .two .left{
  color: coral;
  font-weight: bold;
}

.wrapper .foodList .foodItem_1 .right .two .center{
  color:#9F9F9F ;
  margin-right: 12vw;


}
.wrapper .foodList .foodItem_1 .right .two .right{
  color:#9F9F9F ;
  margin-right: 4vw;
}
.wrapper .foodList .foodItem_1 .right .three{
  display: flex;
  align-items: center;
}

.wrapper .foodList .foodItem_1 .right .three .left{
  font-size: 3vw;
  color:#9F9F9F ;
}

.wrapper .foodList .foodItem_1 .right .three .center{
  font-size: 3vw;
  color: #BEBEBE;
  margin-right: 7vw;
}
.wrapper .foodList .foodItem_1 .right .three .right{
  font-size: 3vw;
  color:#00A6EB;
  border: #17BAF9 0.1vw solid;
  border-radius: 2vw;
  position: absolute; /* 添加绝对定位 */
  right: 0; /* 从父元素的右边界开始 */
  margin-right: 6vw;

}

.wrapper .foodList .foodItem_1 .right .four{
  display: flex;
  align-items: center;
  background-color:#FFDAB9;
  color: darkorange;
  width:33vw;
  height: 5vw;
  padding-left: 2vw;
  border-radius: 2vw;
  font-size: 3vw;
}

.wrapper .foodList .foodItem_1 .right .five{
  display: flex;
  align-items: center;
}
.wrapper .foodList .foodItem_1 .right .five .left{
  border-radius: 2vw;
  border: 0.2vw goldenrod solid;
  color:goldenrod ;
  font-size: 3vw;
  padding:0.5vw;
}

.wrapper .foodList .foodItem_1 .right .five .right{
  color: red;
  border-radius: 2vw;
  border: 0.2vw lightcoral solid;
  font-size:3vw;
  padding:0.5vw;

}


</style>